<!--
 * @Description: 级联选择器
 * @Date: 2022-06-14 14:28:03
 * @LastEditTime: 2022-06-15 18:34:41
 * @FilePath: /demo_important/src/views/Fangdou/components/Cascader.vue
 * @Author: softbank126010077018.bbtec.net
-->
<template>
  <div class="Cascader">
    <div v-for="(item, index) in cascaderData" :key="index">
      <el-cascader
        v-model="item.value"
        :options="item.options"
        @change="handleChange(item.value, item.options, index)"
        :props="{ multiple: true, checkStrictly: true, value: 'id' }"
        clearable
        :ref="`cascader${index}`"
      >
        <!-- <template slot-scope="{ node, data }">
          <span>{{ data.label }}</span>
          <span v-if="!node.isLeaf"></span> </template
      > -->
      </el-cascader>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cascader',
  components: {},
  props: {},
  data() {
    return {
      // value: [
      //   ['zhinan', 'shejiyuanze'],
      //   ['zhinan', 'yizhi'],
      // ],
      typeData: [],
      cascaderData: [
        {
          value: [],
          options: [
            {
              id: 'zhinan',
              type: true,
              label: '指南',
              children: [
                {
                  id: 'shejiyuanze',
                  type: false,
                  label: '设计原则',
                },
                {
                  id: 'yizhi',
                  type: true,
                  label: '一致',
                },
                {
                  id: 'fankui',
                  type: true,
                  label: '反馈',
                },
                {
                  id: 'xiaolv',
                  type: true,
                  label: '效率',
                },
                {
                  id: 'kekong',
                  type: true,
                  label: '可控',
                },
              ],
            },
          ],
        },
        {
          value: [],
          options: [
            {
              id: 'zhinan',
              type: true,
              label: '指南',
              children: [
                {
                  id: 'shejiyuanze',
                  type: true,
                  label: '设计原则',
                },
                {
                  id: 'yizhi',
                  type: true,
                  label: '一致',
                },
                {
                  id: 'fankui',
                  type: true,
                  label: '反馈',
                },
                {
                  id: 'xiaolv',
                  type: true,
                  label: '效率',
                },
                {
                  id: 'kekong',
                  type: true,
                  label: '可控',
                },
              ],
            },
          ],
        },
        {
          value: [],
          options: [
            {
              id: 'zhinan',
              type: true,
              label: '指南',
              children: [
                {
                  id: 'shejiyuanze',
                  type: true,
                  label: '设计原则',
                },
                {
                  id: 'yizhi',
                  type: true,
                  label: '一致',
                },
                {
                  id: 'fankui',
                  type: true,
                  label: '反馈',
                },
                {
                  id: 'xiaolv',
                  type: true,
                  label: '效率',
                },
                {
                  id: 'kekong',
                  type: true,
                  label: '可控',
                },
              ],
            },
          ],
        },
      ],
      options: [
        {
          id: 'zhinan',
          label: '指南',
          children: [
            {
              id: 'shejiyuanze',
              label: '设计原则',
            },
            {
              id: 'yizhi',
              label: '一致',
            },
            {
              id: 'fankui',
              label: '反馈',
            },
            {
              id: 'xiaolv',
              label: '效率',
            },
            {
              id: 'kekong',
              label: '可控',
            },
          ],
        },
      ],
    };
  },
  computed: {},
  watch: {
    typeData(newData,oldData) {
      console.log("监听------>",newData);
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleChange(value, itemData, index) {
      value.forEach((element) => {
        if (this.typeData.indexOf(element[1]) == -1) {
          // this.typeData.push(element[1]);
          this.handleUtils(this.cascaderData,index,element[1]);
        }else {
          
        }
      });
      // this.handleutils2(this.cascaderData)
      console.log('过滤后数据------>', this.cascaderData, this.typeData);
    },
    // 递归遍历
    handleUtils(data,index,value) {
      data.forEach((item,index2) => {
        if(index !== index2) {
          item.options.forEach((item3,index3)=> {
            item3.children.forEach((child,index4)=> {
              console.log(child,value);
              if(child.id === value) {
                // 处理数据选中
                item3.children.splice(index4,1)
                // 将选中数组存入单独数组
                if(this.typeData.length > 0) {
                  this.typeData.forEach(typeItem => {
                    if(typeItem.id !== child.id){
                      this.typeData.push(child)
                    }
                  })
                }else {
                  this.typeData.push(child)
                }
              }
            })
          })
        }else {
          console.log("选中的值---->",item.value);
        }
      });
    },
  },
};
</script>

<style scoped >
.Cascader {
  margin-top: 20px;
}
</style>
